{% extends 'base.html' %}
{% load staticfiles %}

{% block css %}
{{ block.super }}



{{ form.media }}
{% endblock %}


{% block header %}
<a href="javascript:;" class="active">新增时段频控型策略</a>
{% endblock %}

{% block action %}
<a class="roll-nav roll-right extra-right-btns pull-right" href="{% url 'strategy:freq_strategy_list' %}">
    <i class="fa fa-reply"></i>
    返回
</a>
{% endblock %}


{% block main %}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox extra-float-margins">
                <div class="extra-box-content">
                    <form method="post" class="form-horizontal" id="menu_create_form"
                          action="{{ request.get_full_path }}">
                        {% csrf_token %}
                        <div class="form-group">
                            <label class="col-sm-2 control-label">数据源</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="id_strategy_source" name="strategy_source">
                                </select>
                                <span id="id-strategy_source-error" class="help-block" style="color:darkred"></span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" id="label-strategy_body">主体名称</label>
                            <div class="col-sm-10">
                                <input type="hidden" name="strategy_body" id="id_strategy_body">
                                <span id="cb-strategy_body"></span>
                                <span class="help-block">{{ form.strategy_body.help_text }}</span>
                                <span id="id-strategy_body-error" class="help-block" style="color:darkred"></span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">时段(单位:秒)</label>
                            <div class="col-sm-10">
                                {{ form.strategy_time }}
                                <span class="help-block">{{ form.strategy_time.help_text }}</span>
                                <span id="id-strategy_time-error" class="help-block" style="color:darkred"></span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">最大值</label>
                            <div class="col-sm-10">
                                {{ form.strategy_limit }}
                                <span id="id-strategy_limit-error" class="help-block" style="color:darkred"></span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">策略名称</label>
                            <div class="col-sm-10">
                                {{ form.strategy_name }}
                                <span id="id-strategy_name-error" class="help-block" style="color:darkred"></span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">策略描述</label>
                            <div class="col-sm-10">
                                {{ form.strategy_desc }}
                                <span id="id-strategy_desc-error" class="help-block" style="color:darkred"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary" type="submit">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}


{% block js %}
{{ block.super }}


<script>
    var fun_setVal = function () {
        var source = $("#id_strategy_source").find("option:selected").text()
        var body = $("#id_strategy_body").val();
        var elements = body.split(',');
        body = elements.join(',');
        var time = $("#id_strategy_time").val();
        var limit = $("#id_strategy_limit").val();
        var pattern = /^[1-9]\d*$/; //匹配非负整数
        if (pattern.test(limit)) {
            $("#id-strategy_limit-error").html("");
            $("#id_strategy_name").val("相同" + body + "，在最近" + time + "s内，限" + limit + "次(" + source + ")");
        } else {
            $("#id-strategy_limit-error").html("请输入大于等于1的正整数。");
        }
    };
    fun_setVal();
    $('#id_strategy_source').on('change', fun_setVal);
    $('#id_strategy_time').on('propertychange input', fun_setVal);
    $('#id_strategy_limit').on('propertychange input', fun_setVal);
</script>


<script>
    $(function () {
        // 创建漏洞表单提交
        $("body").on("submit", '#menu_create_form', function (e) {
            e.preventDefault();
            var form = $(this);
            var _this = $(this);
            var uri = _this.attr('action');
            var params = form.serializeArray();

            _this.addClass("posting");
            $.ajax({
                url: uri,
                data: params,
                dataType: "json",
                type: "POST",
                success: function (resp) {
                    if (resp.state) {
                        window.location.href = resp.redirect_url;
                    } else {
                        _this.removeClass("posting");
                        var error = resp.error;
                        for (var name in error) {
                            $("#id-" + name + "-error").html(error[name][0]);
                        }
                    }
                },
                error: function (err) {
                    if (err.statusText !== 'abort') {
                        _this.removeClass("posting");
                        swal({
                            title: "哎呀，出错了",
                            type: "error",
                            confirmButtonColor: "#1ab394"
                        });
                    }
                }
            })
        });
    });

    // 渲染 数据源数据
    $.ajax({
        url: "/config/source/ajax/",
        data: {},
        dataType: "json",
        type: "GET",
        success: function (resp) {
            $.each(resp.data, function (i, e) {
                $('#id_strategy_source').append($('<option>', {
                    value: e['name_key'],
                    text: e['name_show']
                }));
                var val = e['name_key'];
                $("#label-strategy_body").attr("data-" + val, JSON.stringify(e['content']));
                if(i === 0) {
                    refresh_checkbox(val);
                }
            });
            change_combox_style();
        }
    });
    function change_combox_style() {
        $('select#id_strategy_source.form-control').searchableSelect();
        function setWidth() {
            var input_element = document.getElementById("id_strategy_desc");
            var objs = document.getElementsByClassName("searchable-select");
            for (var i = 0; i < objs.length; i++) {
                objs[i].style.cssText = "min-width:" + input_element.offsetWidth + "px;";
            }
        }
        window.onresize = setWidth;
        $(document).ready(setWidth)
    }
    function refresh_checkbox(name) {
        name = name.toLowerCase()
        var source_data = $("#label-strategy_body").data(name);
        $("#cb-strategy_body").html("");
        $.each(source_data, function (k, v) {
            var innerHtml = '<span style="margin-right: 10px"><input type="checkbox" class="sb_check" style="margin-right: 3px" name="strategy_body_check" value='+ v['name'] +'>' + v['desc'] + '</span>';
            $("#cb-strategy_body").append(innerHtml);
        });
    }

    function get_data_example() {
        // 数据源选择联动
        var source_name = $(".searchable-select-item.selected").data('value');
        refresh_checkbox(source_name);
    }

    // 定义strategy_body
    $(document).on("click", 'input:checkbox', function() {
        var arrs=[];
        $('input:checked[name=strategy_body_check]').each(function(){
            arrs.push($(this).val());
        });
        var strategy_body = arrs.join(',');
        $("input[name=strategy_body]").val(strategy_body)
        fun_setVal()
});


    // 错误提示复位
    $("#id_strategy_limit").focus(function () {
        $("#id-strategy_limit-error").html("");
    });
    $("#id_strategy_time").focus(function () {
        $("#id-strategy_time-error").html("");
    });

</script>
{% endblock %}


